import React, { Component } from 'react'

import { PickerView } from 'antd-mobile'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterPicker extends Component {
    // 组件模板必须有唯一的跟节点
    // <React.Fragment>可以作为组件的跟节点，但是它本身不会渲染出来
    // <React.Fragment></React.Fragment>可以简写为 <></>

    state = {
        value: this.props.defaultValue? this.props.defaultValue: []
    }

    componentDidMount () {
        // 该生命周期仅仅在组件首次渲染时触发
        console.log('update ' + '-----------------------------')
    }

    componentDidUpdate (prevProps, prevState) {
        // 只要组件的状态（state和props）发生变化就触发该函数
        // prevProps和prevState表示数据变化前信息
        // this.state和this.props表示数据变化后信息
        // console.log('update' + '==============================')
        if (prevProps.defaultValue !== this.props.defaultValue) {
            // 必须添加判断：原来的值和最新值不同（数据发生了变化）
            this.setState({
                value: this.props.defaultValue
            })
        }
    }

    // 表单值的处理：和原生表单的用法不同（参数是实际的数据，而不是事件对象）
    handleChange = (value) => {
        this.setState({
            value
        })
    }

    // 类似于Vue中的 <template></template>
    render() {
        return (
            <div className={styles.condition}>
                {/* 选择器组件：下拉列表 */}
                <PickerView data={this.props.data} value={this.state.value} onChange={this.handleChange} cols={this.props.cols} />

                {/* 底部两个按钮 */}
                <FilterFooter onSave={() => {
                    this.props.onSave(this.props.openType, this.state.value)
                }} onCancel={this.props.onCancel}/>
            </div>
        )
    }
}
/*
React.Fragment 元素性质与Vue中的template类似：元素本身不会渲染
  其实小程序中也有类似的标签 <block></block>
<template v-show='isShow'>
  <div>tom</div>
  <div>jerry</div>
</template>
*/